<!--
 * @Description: 登录组件
 * @Author: hai-27
 * @Date: 2020-02-19 20:55:17
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:08
 -->
<template>
  <div id="myLogin">
    <el-dialog title="登录" width="300px" center :visible.sync="isLogin">
      <el-form :model="LoginUser" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="phone">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="LoginUser.phone"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="请输入密码"
              v-model="LoginUser.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入验证码" v-model="LoginUser.code"
                    style="width: 50%"></el-input>
          <el-image
              style="width: 100px;bottom: -15px;left: 20px"
              @click="queryVerifyCode"
              :src="base64img">
          </el-image>
        </el-form-item>
<!--                <el-form-item>-->
<!--                  <el-image-->
<!--                      style="width: 90px"-->
<!--                      :src="base64img"-->
<!--                      :fit="fit">-->
<!--                  </el-image>-->
<!--                </el-form-item>-->
        <el-form-item>
          <el-button size="medium" type="primary" @click="Login" style="width:100%;">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {mapActions} from "vuex";
import request from "@/utils/request";
import {setToken} from "@/utils/auth"

export default {
  name: "MyLogin",
  data() {
    return {
      base64img: "",
      LoginUser: {
        phone: "",
        password: "",
        uuid: "",
        code: "",
      },
      userInfo:{}
    };
  },
  computed: {
    // 获取vuex中的showLogin，控制登录组件是否显示
    isLogin: {
      get() {
        return this.$store.getters.getShowLogin;
      },
      set(val) {
        this.$refs["ruleForm"].resetFields();
        this.setShowLogin(val);
      }
    }
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin"]),
    Login() {
      request({
        url: "/api/auth/web/login",
        method: "post",
        data: {
          username: this.LoginUser.phone,
          password: this.LoginUser.password,
          code: this.LoginUser.code,
          uuid: this.LoginUser.uuid
        }

      }).then(response => {
        if (response.code == 200) {
          alert('登录成功');
          setToken(response.data);
          this.setShowLogin(false);
          this.getUserInfo()
          localStorage.setItem('user', this.LoginUser.phone);
        } else {
          alert(response.msg)
          this.queryVerifyCode()
        }
      }).catch(()=>{
        this.queryVerifyCode()
      })
    },
    
    getUserInfo(){
      request({
        url: "api/auth/getInfo",
        method: "get",
      }).then((res) => {
        console.log(res)
        this.userInfo=res.user
        this.setUser(this.userInfo);
        console.log(this.userInfo)
      });
    },
    queryVerifyCode() {
      request({
        url: '/api/kaptcha/captchaImage',
        method: 'get'
      }).then(response => {
        this.LoginUser.uuid = response.uuid;
        this.base64img = 'data:image/png;base64,' + response.img;
      })
    }
  },
  created() {
    this.queryVerifyCode();
  }
};
</script>
<style>
</style>
